import * as echarts from 'echarts';
import { deepClone, colorLuminance } from '@/utils/index';

const map_bar = ({
  chartInstance = null, // echarts实例
  geoData = [],
  barSeriesData = [],
  barGeoCoordMap = [],
  barSeriesName = '',
  barUnit = '',
  barColor = ['#66a6ff', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
  yAxisMax = 'max',
  mapJson = {},
  mapName = '',
  barCursor = 'auto',
  selectedMode = false,
}) => {
  echarts.registerMap(mapName, mapJson);

  const geoConfig = {
    tooltip: {
      confine: true,
      trigger: 'item',
      formatter: (params) => {
        let seriesName = params.seriesName;
        if (seriesName == 'series\u00000') seriesName = '';
        let content =
          `<span">${params.name}</span><br />` +
          `${params.marker}${seriesName}&nbsp;&nbsp;` +
          `<span style="font-weight:bold;">${params.value} ${barUnit}</span><br />`;
        return content;
      },
    },
    geo: [
      {
        map: mapName,
        aspectScale: 1.5,
        zoom: 1.2,
        // top: '9.5%',
        z: 2,
        cursor: barCursor,
        tooltip: {
          show: true,
          formatter: (params) => {
            const seriesData = barSeriesData.find((item) => item.name == params.name);
            let content = `<span">${params.name}</span><br />`;
            seriesData.data.forEach((item, index) => {
              content += `${barSeriesName[index]}&nbsp;&nbsp;<span style="font-weight:bold;">${item[0]}${barUnit}</span><br />`;
            });
            return content;
          },
        },
        itemStyle: {
          areaColor: '#003373',
          borderColor: '#fff',
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff',
          },
          itemStyle: {
            areaColor: '#eeb804',
            //areaColor: "#00d8ff",
            borderColor: 'transparent',
          },
        },
        label: {
          show: true,
          fontSize: 13,
          color: '#fff',
          textBorderColor: '#444',
          textBorderWidth: 3,
        },
        selectedMode: selectedMode,
        select: {
          disabled: false,
          label: {
            show: true,
            fontSize: 13,
            color: '#fff',
            textBorderColor: '#444',
            textBorderWidth: 3,
          },
        },
      },
      {
        map: mapName,
        aspectScale: 1.5,
        zoom: 1.2,
        top: '15%',
        z: 1, // 变小，也就是被压在下面
        itemStyle: {
          areaColor: 'transparent',
          borderColor: '#195175',
          borderWidth: 2,
          shadowColor: '#0f4c74',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,
        },
        emphasis: { disabled: true },
        tooltip: { show: false },
      },
    ],
  };
  const geo_opt = deepClone(geoConfig);
  chartInstance.setOption(geo_opt);

  const barConfig = {
    xAxis: [],
    yAxis: [],
    grid: [],
    series: [],
    color: barColor,
  };
  // 计算stack时堆叠总值
  let total = [];
  barSeriesData.forEach((seriesData, index) => {
    seriesData.data.forEach((dataArr) => {
      dataArr.reduce((pre, item) => {
        if (pre[index]) pre[index] += Number(item);
        else pre[index] = Number(item);
        pre[index] = Number(pre[index].toFixed(2));
        return pre;
      }, total);
    });
  });
  // 柱状图最大值
  const barSeriesData_max = Math.max(...total);
  // 柱状图平均值
  let barSeriesData_average = (total.reduce((acc, val) => acc + val, 0) / total.length).toFixed(0);
  // 循环设置柱状图
  barSeriesData.forEach((dataItem, index) => {
    // 获取坐标;
    let geoCoord = barGeoCoordMap.find((item) => item.name == dataItem.name).coord;
    // 转换坐标系上的点到像素坐标值
    let coord = chartInstance.convertToPixel('geo', geoCoord);
    index = index.toString();

    // X轴配置
    barConfig.xAxis.push({
      z: 100,
      id: index, // 组件id，在配置中引用标识
      gridIndex: index, // x轴所在的grid的索引
      type: 'category',
      // 坐标轴在 grid 区域中的分隔线
      splitLine: { show: false },
      // 坐标轴刻度
      axisTick: { show: false },
      // 坐标轴刻度标签
      axisLabel: { show: false },
      // 坐标轴轴线
      axisLine: { show: false },
      data: [dataItem.name], // 类目数据
    });
    // Y轴配置
    barConfig.yAxis.push({
      z: 100,
      id: index, // 组件id，在配置中引用标识
      gridIndex: index, // x轴所在的grid的索引
      // 坐标轴在 grid 区域中的分隔线
      splitLine: { show: false },
      // 坐标轴刻度
      axisTick: { show: false },
      // 坐标轴刻度标签
      axisLabel: { show: false },
      // 坐标轴轴线
      axisLine: { show: false },
    });
    // 坐标系配置
    barConfig.grid.push({
      z: 100,
      id: index, // 组件id，在配置中引用标识
      width: 30, // 组件的宽度
      height: 100, // 组件的高度
      left: coord[0] - 15, // 离容器左侧的距离
      top: coord[1] - 115, // 离容器上侧的距离
    });
    // 图标系列配置
    dataItem.data.forEach((item, dataIndex) => {
      barConfig.series.push({
        cursor: barCursor,
        z: 100 + dataIndex,
        // id: index, // 组件id，在配置中引用标识
        name: barSeriesName[dataIndex],
        type: 'bar', // 柱状图
        xAxisId: index, // 使用的x轴的id
        yAxisId: index, // 使用的y轴的id
        data: item, // 柱子数据
        stack: `total${index}`,
        itemStyle: { color: barColor[dataIndex] },
      });
      //底部圆片
      // 计算底部圆片data
      let bottom_data = 0;
      if (dataIndex > 0) {
        for (let diff = 1; dataIndex - diff >= 0; diff++) {
          const data = dataItem.data[dataIndex - diff];
          bottom_data += data[0];
        }
      }
      barConfig.series.push({
        cursor: barCursor,
        z: 100 + dataIndex,
        name: barSeriesName[dataIndex],
        type: 'pictorialBar',
        xAxisId: index, // 使用的x轴的id
        yAxisId: index, // 使用的y轴的id
        symbolSize: [21, 10], // 圆片的形状大小
        symbolOffset: [0, -5], // 圆片的偏移量
        itemStyle: { color: barColor[dataIndex] },
        symbolPosition: 'end',
        tooltip: { show: false },
        emphasis: { disabled: true },
        data: [bottom_data],
      });
    });
    // 数据圆片(柱子的顶部圆片)
    barConfig.series.push({
      cursor: barCursor,
      z: 1000,
      name: barSeriesName[dataItem.data.length - 1],
      type: 'pictorialBar',
      xAxisId: index, // 使用的x轴的id
      yAxisId: index, // 使用的y轴的id
      symbolSize: [20, 10],
      symbolOffset: [0, -5], // 圆片的偏移量
      itemStyle: {
        opacity: 1,
        // color: colorLuminance(barColor[dataItem.data.length - 1], -20),
        color: colorLuminance(
          barColor[dataItem.data.length - 1].colorStops
            ? barColor[dataItem.data.length - 1].colorStops[0].color
            : barColor[dataItem.data.length - 1],
          -25
        ),
      },
      symbolPosition: 'end',
      tooltip: { show: false },
      emphasis: { disabled: true },
      data: [total[index]],
      // 柱子顶部显示值
      label: {
        show: true,
        position: 'top',
        distance: 0,
        formatter: `{c}${barUnit}`,
        color: '#fff',
        textBorderColor: '#444',
        textBorderWidth: 3,
      },
    });
    // // 上半截柱子(背部阴影bar)
    // barConfig.series.push({
    //   z: 99,
    //   type: 'bar',
    //   xAxisId: index, // 使用的x轴的id
    //   yAxisId: index, // 使用的y轴的id
    //   // barWidth: '20',
    //   barGap: '-100%',
    //   itemStyle: {
    //     opacity: 0.2,
    //     // color: 'rgb(174, 222, 255)',
    //     color: {
    //       type: 'linear',
    //       x: 0, //右
    //       y: 0, //下
    //       x2: 1, //左
    //       y2: 0, //上
    //       colorStops: [
    //         { offset: 0, color: 'rgba(207, 235, 255)' },
    //         { offset: 1, color: 'rgba(228, 242, 255)' },
    //       ],
    //     },
    //   },
    //   tooltip: { show: false },
    //   data: [100],
    // });
    // 最顶部圆片(背部阴影最顶部圆片)
    barConfig.series.push({
      z: 101,
      type: 'pictorialBar',
      xAxisId: index, // 使用的x轴的id
      yAxisId: index, // 使用的y轴的id
      symbolSize: [21, 10],
      symbolOffset: [0, -5],
      symbolPosition: 'end',
      itemStyle: {
        opacity: 0,
        color: '#84ceff',
        // color: 'transparent',
      },
      tooltip: { show: false },
      data: [yAxisMax == 'avg' ? barSeriesData_average : barSeriesData_max],
    });
  });
  const bar_opt = deepClone(barConfig);

  const opt = Object.assign(geo_opt, bar_opt);
  return opt;
};

export default {
  map_bar: map_bar,
};
